<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: YUI Loader - Dynamically Adding YUI and External Modules</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: YUI Loader - Dynamically Adding YUI and External Modules</h1>

    
        <a href="#toc" class="jump">Jump to Table of Contents</a>
    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
    <p>This example uses the dynamic loading capability built into YUI to pull in additional components as needed.  In addition, it demonstrates how to define external modules that can be loaded alongside YUI. </p>
    <p>This example works as follows:</p>
    <ol>
        <li>A <code>YUI</code> instance is created with a configuration object that defines parameters we need to dynamically load new modules.</li>
        <li><code>node</code> is used so that we can bind an event listener to a button.  YUI will dynamically fetch <code>node</code> and its dependencies.  By default, these dependencies will be fetched from the Yahoo! CDN and will be combined into a single file.</li>
        <li>A click listener is added to a button.</li>
        <li>When this button is clicked, YUI will dynamically fetch YUI 3 Drag &amp; Drop and YUI 2 Calendar files.  The CSS file will be fetched first; this helps prevent a flash of unstyled content when the Calendar Control is loaded.  This file is inserted above a style block which contains our custom calendar styles (via a YUI config option) so that styles are applied in the correct order.</li>
        <li>A Calendar instance is created, and it is made draggable.</li>
    </ol>
</div>

<div class="example">
    
<style>
#cal1Cont {
    width: 250px;
    float: none;
}
#cal1Cont .calhead {
    cursor: move;
}
</style>
<input id="button1" type="button" value="Click to load a YUI 2 Calendar" class="button" />

<div id="cal1Cont"></div>

<script>
var config = {
    // This lets you define one or more external modules that will be added to
    // the YUI metadata.  You can define dependency relationships between your
    // modules and also between your modules and YUI modules.  Here we are
    // defining 2.x calendar components as external modules.

    // Defines a list of groups.  The modules in each group group share the 
    // base path and combo specification.
    groups: {
        yui2: {
            combine: true,
            base: 'http://yui.yahooapis.com/2.8.0r4/build/',
            comboBase: 'http://yui.yahooapis.com/combo?',
            root: '2.8.0r4/build/',
            modules:  {
                yui2_yde: {
                    path: 'yahoo-dom-event/yahoo-dom-event.js'
                },
                yui2_calendar: {
                    path: 'calendar/calendar-min.js',
                    requires: ['yui2_yde', 'yui2_calendarcss']
                },
                yui2_calendarcss: {
                    path: 'calendar/assets/skins/sam/calendar.css',
                    type: 'css'
                }
            }
        }
    }

};


YUI(config).use('node', function(Y, result) {
    // The callback supplied to use() will be executed regardless of
    // whether the operation was successful or not.  The second parameter
    // is a result object that has the status of the operation.  We can
    // use this to try to recover from failures or timeouts.
    if (!result.success) {

        Y.log('Load failure: ' + result.msg, 'warn', 'Example');

    } else {

        // Add a button click listener to load the calendar
        var handle = Y.on('click', function(e) {

            // dynamically load the 2.x calendar and 3.x drag and drop
            Y.use('dd-drag', 'yui2_calendar', function(Y) {
                var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');

                // Once the 2.x calendar renders, we will add 3.x drag
                // functionality to it and remove the listener after render.
                var fn = function() {
                    //Only create the 
                    var dd = new Y.DD.Drag({
                        node: '#cal1Cont'
                    }).addHandle('div.calheader');
                    cal1.renderEvent.unsubscribe(fn);
                };
                cal1.renderEvent.subscribe(fn);
                cal1.render();
            });

            // Remove the button click listener so that we only try to
            // load the calendar control once.
            handle.detach();

        }, '#button1');
    }

});
</script>


</div>


<h3 id="creating-your-yui-instance">Creating your YUI instance</h3>
<p>First, we need to create our YUI instance with the <code>node</code> module, so we can attach a listener to a button.</p>

<pre class="code prettyprint">YUI().use(&#x27;node&#x27;, function(Y) {

});</pre>


<p>YUI accepts a configuration object when you create an instance.  Your dynamic-loading options can be defined here.</p>

<pre class="code prettyprint">var config = {
    &#x2F;&#x2F; This lets you define one or more external modules that will be added to
    &#x2F;&#x2F; the YUI metadata.  You can define dependency relationships between your
    &#x2F;&#x2F; modules and also between your modules and YUI modules.  Here we are
    &#x2F;&#x2F; defining 2.x calendar components as external modules.

    &#x2F;&#x2F; Defines a list of groups.  The modules in each group group share the 
    &#x2F;&#x2F; base path and combo specification.
    groups: {
        yui2: {
            combine: true,
            base: &#x27;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;2.8.0r4&#x2F;build&#x2F;&#x27;,
            comboBase: &#x27;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;combo?&#x27;,
            root: &#x27;2.8.0r4&#x2F;build&#x2F;&#x27;,
            modules:  {
                yui2_yde: {
                    path: &#x27;yahoo-dom-event&#x2F;yahoo-dom-event.js&#x27;
                },
                yui2_calendar: {
                    path: &#x27;calendar&#x2F;calendar-min.js&#x27;,
                    requires: [&#x27;yui2_yde&#x27;, &#x27;yui2_calendarcss&#x27;]
                },
                yui2_calendarcss: {
                    path: &#x27;calendar&#x2F;assets&#x2F;skins&#x2F;sam&#x2F;calendar.css&#x27;,
                    type: &#x27;css&#x27;
                }
            }
        }
    }

};

YUI(config).use(&#x27;node&#x27;, function(Y) {

});</pre>


<h3 id="creating-the-calendar">Creating the Calendar</h3>
<p>Now that we have our core YUI instance in place, we add an event listener to
a button that will dynamically load YUI 3 Drag &amp; Drop and YUI 2 Calendar.</p>

<pre class="code prettyprint">&#x2F;&#x2F; The callback supplied to use() will be executed regardless of
&#x2F;&#x2F; whether the operation was successful or not.  The second parameter
&#x2F;&#x2F; is a result object that has the status of the operation.  We can
&#x2F;&#x2F; use this to try to recover from failures or timeouts.
if (!result.success) {

    Y.log(&#x27;Load failure: &#x27; + result.msg, &#x27;warn&#x27;, &#x27;Example&#x27;);

} else {

    &#x2F;&#x2F; Add a button click listener to load the calendar
    var handle = Y.on(&#x27;click&#x27;, function(e) {

        &#x2F;&#x2F; dynamically load the 2.x calendar and 3.x drag and drop
        Y.use(&#x27;dd-drag&#x27;, &#x27;yui2_calendar&#x27;, function(Y) {
            var cal1 = new YAHOO.widget.Calendar(&#x27;cal1&#x27;, &#x27;cal1Cont&#x27;);

            &#x2F;&#x2F; Once the 2.x calendar renders, we will add 3.x drag
            &#x2F;&#x2F; functionality to it and remove the listener after render.
            var fn = function() {
                &#x2F;&#x2F;Only create the 
                var dd = new Y.DD.Drag({
                    node: &#x27;#cal1Cont&#x27;
                }).addHandle(&#x27;div.calheader&#x27;);
                cal1.renderEvent.unsubscribe(fn);
            };
            cal1.renderEvent.subscribe(fn);
            cal1.render();
        });

        &#x2F;&#x2F; Remove the button click listener so that we only try to
        &#x2F;&#x2F; load the calendar control once.
        handle.detach();

    }, &#x27;#button1&#x27;);
}</pre>


<h3 id="full-example-source">Full Example Source</h3>

<pre class="code prettyprint">&lt;style&gt;
#cal1Cont {
    width: 250px;
    float: none;
}
#cal1Cont .calhead {
    cursor: move;
}
&lt;&#x2F;style&gt;
&lt;input id=&quot;button1&quot; type=&quot;button&quot; value=&quot;Click to load a YUI 2 Calendar&quot; class=&quot;button&quot; &#x2F;&gt;

&lt;div id=&quot;cal1Cont&quot;&gt;&lt;&#x2F;div&gt;

&lt;script&gt;
var config = {
    &#x2F;&#x2F; This lets you define one or more external modules that will be added to
    &#x2F;&#x2F; the YUI metadata.  You can define dependency relationships between your
    &#x2F;&#x2F; modules and also between your modules and YUI modules.  Here we are
    &#x2F;&#x2F; defining 2.x calendar components as external modules.

    &#x2F;&#x2F; Defines a list of groups.  The modules in each group group share the 
    &#x2F;&#x2F; base path and combo specification.
    groups: {
        yui2: {
            combine: true,
            base: &#x27;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;2.8.0r4&#x2F;build&#x2F;&#x27;,
            comboBase: &#x27;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;combo?&#x27;,
            root: &#x27;2.8.0r4&#x2F;build&#x2F;&#x27;,
            modules:  {
                yui2_yde: {
                    path: &#x27;yahoo-dom-event&#x2F;yahoo-dom-event.js&#x27;
                },
                yui2_calendar: {
                    path: &#x27;calendar&#x2F;calendar-min.js&#x27;,
                    requires: [&#x27;yui2_yde&#x27;, &#x27;yui2_calendarcss&#x27;]
                },
                yui2_calendarcss: {
                    path: &#x27;calendar&#x2F;assets&#x2F;skins&#x2F;sam&#x2F;calendar.css&#x27;,
                    type: &#x27;css&#x27;
                }
            }
        }
    }

};


YUI(config).use(&#x27;node&#x27;, function(Y, result) {
    &#x2F;&#x2F; The callback supplied to use() will be executed regardless of
    &#x2F;&#x2F; whether the operation was successful or not.  The second parameter
    &#x2F;&#x2F; is a result object that has the status of the operation.  We can
    &#x2F;&#x2F; use this to try to recover from failures or timeouts.
    if (!result.success) {

        Y.log(&#x27;Load failure: &#x27; + result.msg, &#x27;warn&#x27;, &#x27;Example&#x27;);

    } else {

        &#x2F;&#x2F; Add a button click listener to load the calendar
        var handle = Y.on(&#x27;click&#x27;, function(e) {

            &#x2F;&#x2F; dynamically load the 2.x calendar and 3.x drag and drop
            Y.use(&#x27;dd-drag&#x27;, &#x27;yui2_calendar&#x27;, function(Y) {
                var cal1 = new YAHOO.widget.Calendar(&#x27;cal1&#x27;, &#x27;cal1Cont&#x27;);

                &#x2F;&#x2F; Once the 2.x calendar renders, we will add 3.x drag
                &#x2F;&#x2F; functionality to it and remove the listener after render.
                var fn = function() {
                    &#x2F;&#x2F;Only create the 
                    var dd = new Y.DD.Drag({
                        node: &#x27;#cal1Cont&#x27;
                    }).addHandle(&#x27;div.calheader&#x27;);
                    cal1.renderEvent.unsubscribe(fn);
                };
                cal1.renderEvent.subscribe(fn);
                cal1.render();
            });

            &#x2F;&#x2F; Remove the button click listener so that we only try to
            &#x2F;&#x2F; load the calendar control once.
            handle.detach();

        }, &#x27;#button1&#x27;);
    }

});
&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            
                <div id="toc" class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Table of Contents</h2>
                    </div>

                    <div class="bd">
                        <ul class="toc">
<li>
<a href="#creating-your-yui-instance">Creating your YUI instance</a>
</li>
<li>
<a href="#creating-the-calendar">Creating the Calendar</a>
</li>
<li>
<a href="#full-example-source">Full Example Source</a>
</li>
</ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Setting up a YUI Instance">
                                        <a href="yui-core.html">YUI Core</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Working with multiple YUI instances.">
                                        <a href="yui-multi.html">Multiple Instances</a>
                                    </li>
                                
                            
                                
                                    <li data-description="On-demand loading of YUI and non-YUI assets">
                                        <a href="yui-loader-ext.html">YUI Loader - Dynamically Adding YUI and External Modules</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Create Class Hierarchies with &#x60;extend&#x60;">
                                        <a href="yui-extend.html">Create Class Hierarchies with &#x60;extend&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Creating a composition-based class structure using &#x60;augment&#x60;">
                                        <a href="yui-augment.html">Compose Classes of Objects with &#x60;augment&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Add behaviors to objects or static classes with &#x60;mix&#x60;">
                                        <a href="yui-mix.html">Add Behaviors to Objects with &#x60;mix&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Combine data sets and create shallow copies of objects with &#x60;merge&#x60;">
                                        <a href="yui-merge.html">Combine Data Sets with &#x60;merge&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Check data types with the &#x60;Lang Utilities&#x60;">
                                        <a href="yui-isa.html">Check Data Types with &#x60;Lang&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Get information about the current user agent with &#x60;UA&#x60;">
                                        <a href="yui-ua.html">Browser Detection with &#x60;UA&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Working with YUI 2 in 3">
                                        <a href="yui-yui2.html">Working with YUI 2 in 3</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Natively use YUI Gallery Modules">
                                        <a href="yui-gallery.html">Natively use YUI Gallery Modules</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
